<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { CmsArticle, CmsCommentSearch } from '@/types/cms';
  import { getArticleList } from '@/api/cms';
  import { CmsArticleTypes } from '@/config/cms';

  const data = ref<CmsCommentSearch>({});

  const emit = defineEmits(['submit']);

  const handleConfirm = () => {
    emit('submit', data.value);
  };

  const handleReset = () => {
    data.value = {};
    emit('submit', {});
  };

  const articleList = ref<CmsArticle[]>([]);
  const handleSearchArticle = async (content: string) => {
    const res = await getArticleList({
      articleTitle: content,
      pageIndex: 1,
      pageSize: 100,
    });
    articleList.value = res.data.data.list || [];
  };
</script>

<template>
  <a-form :model="data" layout="vertical">
    <a-row :gutter="12">
      <a-col :flex="1">
        <a-row :gutter="12">
          <a-col :span="6">
            <a-form-item hide-label field="authorId">
              <a-select
                v-model="data.articleId"
                allow-clear
                allow-search
                :options="
                  articleList.map((i) => ({
                    label: i.articleTitle,
                    value: i.id,
                  }))
                "
                placeholder="检索内容标题"
                @search="handleSearchArticle"
              >
                <template #prefix>内容</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="state">
              <a-select
                v-model="data.state"
                allow-clear
                :options="[
                  { value: 0, label: '待审核' },
                  { value: 1, label: '已通过' },
                ]"
              >
                <template #prefix>状态</template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col flex="none" style="width: 80px">
        <a-row :gutter="[12, 12]">
          <a-col>
            <a-button type="primary" @click="handleConfirm"> 搜索 </a-button>
          </a-col>
          <a-col><a-button @click="handleReset">重置</a-button></a-col>
        </a-row>
      </a-col>
    </a-row>
  </a-form>
</template>
